<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-10-31 9:08
  PageName：g_list_Layout_Horizontal.html
  Function：列表布局 - 水平布局
  URL：http://localhost:8080/h_list/h3_list_style/g_list_Layout_Horizontal.html
-->

<head>
    <meta charset="UTF-8">
    <title>列表布局 - 水平布局</title>

    <style type="text/css">
        /* 定义列表基本样式 */
        #menu {
            padding: 6px 0;             /* 增加列表的上下补白，间接定义宽度 */
            margin: 0;                  /* 清除边界 */
            width: 600px;               /* 固定导航菜单的宽度 */
            background-color: #FFF2BF;  /* 定义背景色 */
        }

        /* 定义列表项目行内显示 */
        #menu li {
            list-style: none;   /* 清除项目列表符号 */
            display: inline;    /* 行内显示 */
        }

        /* 定义超链接样式 */
        #menu li a {
            padding: 3px 0.5em;         /* 顶部补白，间接定义文本垂直居中 */
            text-decoration: none;      /* 清除超链接下划线 */
            color: black;               /* 黑色字体 */
            background-color: #FFF2BF;  /* 浅黄色背景 */
            border: 2px solid #FFF2BF;  /* 边框样式 */
        }

        /* 定义鼠标经过时的样式 */
        #menu li a:hover {
            color: black;                /* 黑谁字体 */
            background-color: #FFE271;   /* 增加黄色背景效果 */
            border-style: outset;        /* 定义立体边框样式（立体凸边） */
        }

        /* 定义超链接被激活时的样式 */
        #menu li a:active {
            border-style: inset; /* 定义立体边框样式（立体凹边） */
        }
    </style>
</head>

<body>
<h1>网站分类</h1>
<ul id="menu">
    <li><a href="#" title="">软件工程</a></li>
    <li><a href="#" title="">编程语言</a></li>
    <li><a href="#" title="">软件设计</a></li>
    <li><a href="#" title="">Web前端</a></li>
    <li><a href="#" title="">手机开发</a></li>
    <li><a href="#" title="">所有随笔</a></li>
</ul>
</body>
</html>